<template>
  <div id="wangEditor">
    <div ref="editor" style="text-align: left"></div>
  </div>
</template>

<script>
import E from "wangeditor";

export default {
  name: "wangEditor",
  props: {
    initText: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      editor: null,
    };
  },
  destory() {},
  mounted() {
    console.log(this.connect);
    var _this = this;
    //   let editor = new E('#editorElem')
    _this.editor = new E(this.$refs.editor);
    //    _this.editor.customConfig.uploadImgShowBase64 = true;
    //配置颜色
    _this.editor.customConfig.colors = [
      "#000000",
      "#eeece0",
      "#1c487f",
      "#4d80bf",
      "#c24f4a",
      "#8baa4a",
      "#7b5ba1",
      "#46acc8",
      "#f9963b",
      "#ffffff",
      "#00cc99",
    ];
    /* 处理上传图片的controller路径 */
    _this.editor.customConfig.uploadImgServer =
      "https://php.zgsj1.com/api/Image/common_upload_img"; //上传URL
    _this.editor.customConfig.uploadImgMaxSize = 100 * 1024 * 1024;
    _this.editor.customConfig.uploadImgMaxLength = 100;
    _this.editor.customConfig.uploadFileName = "file"; //服务端接收file的名字
    _this.editor.customConfig.uploadImgParams = {
      // 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode
      // 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode
      muban_id: "11502",
    };
    _this.editor.customConfig.uploadImgHooks = {
      customInsert: function (insertImg, result, editor) {
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        var url = result.path;
        insertImg(url);

        // result 必须是一个 JSON 格式字符串！！！否则报错
      },
    };
    _this.editor.customConfig.onchange = (html) => {
      _this.$emit("myEditorContent", html); //把这个html通过catchData的方法传入父组件
    };
    _this.editor.create();
    _this.editor.txt.html(_this.initText);
  },
  watch: {
    initText() {
      this.editor.txt.html(this.initText);
    },
  },
};
</script>

<style scoped>
#wangEditor {
  overflow: hidden;
  z-index: 0;
}
</style>
